<template>
	<view class="search-bar">
				 <view class="search-bar-box">
				 <image class="search-span" src="../../static/搜索.png"/>
				 <input type="text" value=""  placeholder="请输入搜索内容" class="search-text" maxlength="10" focus/>
				 <button class="search-btn">搜索</button>
				 </view>
	</view>
	<view>
		<view class="find">
			搜索发现
		</view>
	</view>
	<view class="zhengti">
	<view class="dazi">Reno11 系列<view class="xiaozi">新</view></view>
	<view class="dazi">一加 12<view class="xiaozi">新</view></view>
	<view class="dazi">OPPO 新品平板<view class="xiaozi">新</view></view>
	<view class="dazi">Reno系列<view class="xiaozi">爆</view></view>
	<view class="dazi">真无线耳机<view class="xiaozi">爆</view></view>
	<view class="dazi">一加 Ace 2 Pro<view class="xiaozi">热</view></view>
	<view class="dazi">OPPO Reno10<view class="xiaozi">热</view></view>
	<view class="dazi">OPPO K11<view class="xiaozi">热</view></view>
</view>	
	
	
	
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.search-bar{
	width: 750rpx;
	height: 70rpx;
}
.search-bar-box{
	display: flex;
	margin: 0 auto;
	width: 100%;
	height: 50rpx;
	border:4rpx solid #f3f3f4;
	border-radius: 10rpx;
	background-color: #f3f3f4;
}
.search-span{
	width: 45rpx;
	height: 30rpx;
	margin-top: 10rpx;
	margin-left: 30rpx;
}
.search-text{
	width: 100%;
	margin-top: 10rpx;
	margin-left: 20rpx;
	font-size: 20rpx;
	color: #7f7f81;
}
.search-btn{
	background-color: white; /* Green */
	text-align: center;
	display: inline-block;
	font-size: 20rpx;
	width: 150rpx;
	height: 50rpx;
	line-height: 50rpx;
	border-radius: 10rpx;
	letter-spacing: 5rpx;
}
.find{
	font-size: 20rpx;
	margin-top: 10rpx;
	margin-bottom: 10rpx;
}
.zhengti{
	width: 750rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	}
.dazi{
	font-size: 20rpx;
	display: flex;
	width: 375rpx;
	height: 40rpx;
}
.xiaozi{
	margin-top: 5rpx;
	text-align: center;
	font-size: 12rpx;
	width: 20rpx;
	height: 20rpx;
	background-color: #EC3E50;
	color: white;
}
</style>
